<template>
    <div>
        <h1>workFlowDesign</h1>
        <Anchor title="概述" h2></Anchor>
        <p>使用流程设计器，设置流程模板。</p>
        <Anchor title="代码示例" h2></Anchor>
        <div class="expense-main" v-if="dataReady.ready">
            <p style="color: #ff0000;">默认宽度和高度为800*300</p>
            <!--新增部门报销header-->
            <div class="expense-header">
                <div class="back-btn" @click="canclePage"></div>
                <!--<h2>新建流程</h2>-->
                <Button type="primary" @click="submit" class="createBtn">
                    <span>预览</span>
                </Button>
            </div>
            <br>
            <br>
            <Modal
                    v-model="modal1"
                    title="流程预览"
                    width="1000">
                <div class="workflow-wrap" v-if="workFlowData">
                    <workFlow
                            :showDetails="true"
                            :workFlowData="workFlowData"
                            :startSubmit="formSubmitStart"
                            :handlerMap="handlerDefault"
                            @on-submit="formSubmitExec"
                            @on-error="formSubmitError"
                    />
                </div>
            </Modal>

            <!---->
            <div class="expense-content">
                <div class="tophandler">
                    <Form label-position="right"
                          ref="workFlowDesignContent"
                          :label-width="80">
                        <Row>
                            <Col span="5">
                                <FormItem label="名称:">
                                    <Input type="text" placeholder="请输入流程分类名称"/>
                                </FormItem>
                            </Col>
                            <Col span="1">&nbsp;</Col>
                            <Col span="5">
                                <FormItem label="描述:">
                                    <Input type="text" placeholder="请输入流程分类名称"/>
                                </FormItem>
                            </Col>
                            <Col span="1">&nbsp;</Col>
                            <Col span="5">
                                <FormItem label="业务分类:">
                                    <Select></Select>
                                </FormItem>
                            </Col>
                            <Col span="1">&nbsp;</Col>
                            <Col span="5">
                                <FormItem label="业务类型:">
                                    <Select></Select>
                                </FormItem>
                            </Col>
                            <Col span="1">&nbsp;</Col>
                        </Row>
                    </Form>
                </div>
                <workFlowDesign
                        @handlerWorkFlowDesign="handlerWorkFlowDesign"
                        :workFlowDesignState="workFlowDesignState"
                        :wrapHeight="stage.height"
                        :wrapWidth="stage.width"/>
                <div class="expense-submit">
                    <div class="expense-btn-group" style="text-align: center;padding: 12px 0 ;">
                        <Button type="success" @click="submit" class=" btn-sub">提交</Button>
                        <Button type="info" class=" btn-cancle">取消</Button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import Code from './code/affix';
	import iCode from './code/code';
    import workFlowDesign from './workflow/workflowDesign/workFlowDesign_v3'
    import {NodeAdapter} from './workflow/workflowDesign/adapter/Adapter'

    import workFlow from './workflow/workflowDetail/WorkFlow'


	export default {
		name: 'WorkFlowDesign',
		data() {
			return {
                modal1:false,
                formSubmitStart: {
                    start: false
                },
                handlerDefault: {
                },
                workFlowData:null,
				code: Code,
                 // workFlowDesignState
                 workFlowDesignState: {
                    state: false,
                 },
                 //
                 stage: {
                    width: 100,
                    height: 100,
                 },
                 //
                 dataReady: {
                    ready: false,
                 },
                 // 表单设计器数据
                 wfd:null,
			}
		},
		components: {
			Anchor,
			Demo,
			iCode,
            workFlowDesign,
            workFlow,
        },
         mounted() {
            this.init();
         },
        methods: {
            formSubmitExec(item) {
                console.log(item);
            },
            formSubmitError(obj) {
                this.formSubmitStart = {
                    start: false
                };
                console.log(obj.msg);
            },
            handlerWorkFlowDesign(data) {
                this.wfd = data;
                // console.log(this.wfd);
                let ad = new NodeAdapter({
                    wfd:data,
                });
                console.log(data);
                this.workFlowData = ad.getAdapterData();
                this.modal1 = true ;
                this.workFlowDesignState = {
                    state : false ,
                };
            },
            submit() {
                this.workFlowDesignState = {
                    state: true,
                };
            },
            init() {
                this.stage = {
                    width: window.innerWidth - 480,
                    height: window.innerHeight - 235,
                };
                this.dataReady = {
                    ready: true,
                }
                this.$loading(false);
            },
            // 返回上一页
            canclePage() {
                this.$router.go(-1);//返回上一层
            },
        },
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
